<template>
  <div class="tool-page">
    <div
      v-for="(item, index) in state.imgData"
      :key="index"
      v-drag="{type: 'clone', fn: renderCanvas, value: item, index: index }"
      :style="{ background: 'url('+item+') 100% 100% no-repeat', backgroundSize: '100% 100%'}"
      class="item-content drag-element"
    />
  </div>
</template>

<script>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
    name: 'ToolsPage',
    setup() {
        const store = useStore()
        const state = reactive({
            dragOption: {
                type: 'clone'
            },
            imgData: [
                'http://qm1kzjo0t.hn-bkt.clouddn.com/1.jpg?' + new Date().getTime(),
                'http://qm1kzjo0t.hn-bkt.clouddn.com/good.jpg?' + new Date().getTime()
            ]
        })
        const router = useRouter()
        const toHome = () => {
            router.push('home')
        }
        const renderCanvas = (params) => {
            store.dispatch('setRender', params)
        }
        return {
            state,
            toHome,
            renderCanvas
        }
    }
}
</script>

<style scoped lang="less">
  .target-clone-class {
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    opacity: .8;
    border: 2px dotted red;
    cursor: move;
    z-index: -1;
  }
    .tool-page {
        box-shadow: -5px 0 5px -5px #cecece;
        .item-content {
            width: 100%;
            height: 150px;
            cursor: all-scroll;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 10px;
            transition: all .3s;
        }
        .item-content:hover {
            box-shadow: 0 2px 6px 1px #c6cad1;
        }
        /*.drag-element {*/
        /*    position: absolute;*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    border-radius: 5px;*/
        /*    background: #15a379;*/
        /*    cursor: move;*/
        /*    overflow: hidden;*/
        /*    .tool-all {*/
        /*        width: 100%;*/
        /*        height: 100%;*/
        /*    }*/
        /*}*/
        .tool-content {
            /*width: 100%;*/
            /*height: 150px;*/
            border-radius: 5px;
            margin-bottom: 10px;
            overflow: hidden;
            img {
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }
        img {
          width: 100%;
          height: 100%;
          box-shadow: 0 2px 6px 1px rgba(198,202,209,0);
        }
        img:hover {
          box-shadow: 0 2px 6px 1px #c6cad1;
        }
    }
</style>
